<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Force</title>
	<script src="../libs/d3.v4.js"></script>
	<link rel="stylesheet" href="../css/style.css">
	<style>
		#main,#map,svg{
			height:100%;
			width:100%;
		}
		#main{
			overflow:hidden;
			position: relative;
		}
		#controls{
			position: absolute;
			top:10px;
			right:10px;
		}
		circle{
			fill:steelblue;
			stroke-width:1;
			stroke:#ccc;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="map">
			<svg id="svg"></svg>
		</div>
	</div>
	<script>
		window.onload = ()=>{
			var svg = d3.select("svg"),
				w = parseInt(svg.style("width")),
				h = parseInt(svg.style("height"));
			n = 500,
   				nodes = d3.range(n).map(function(i) { return {index: i}; }),
    			links = d3.range(n).map(function(i) { return {source: i, target: (i + 3) % n}; });
    		nodes.forEach((d,i)=>{
    			d.r = Math.random()*20;
    		})



    		var simulation = d3.forceSimulation(nodes)
    			.force("center",d3.forceCenter(w/2,h/2))
    			.force("collision",d3.forceCollide().radius((d)=>{
    				return d.r;
    			}))
    			.on("tick",()=>{
    				tick(nodes)
    			})
    		function tick(n){
    			var update = svg.selectAll("circle")
    				.data(n)
    			update.exit().remove();
    			update.enter().append("circle")
    				.merge(update)
    				.attr("cx",(d)=>{return d.x;})
    				.attr("cy",(d)=>{return d.y;})
    				.attr("r",(d)=>{return d.r})
    		}

    		d3.select("#controls").selectAll("input")
    			.on("change",()=>{
    				changeType(d3.select(d3.event.target).attr("id"))
    			})
		}
	</script>
</body>
</html>